<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>注册小米账号</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="shortcut icon" href="./favicon.ico" />
    <style>
        *{margin: 0;padding: 0;}
        a {
            text-decoration: none;
            color: #000000;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: middle;
        }

        .wrap {
            width: 800px;
            height: 600px;
            margin: 30px auto 0;
            background: #fff;
            text-align: center;
        }

        h2 {
            margin-bottom: 15px;
        }

        .logo {
            margin: 20px auto;
        }
        .form-horizontal div.form-group {
            margin-left: 70px;
        } 

        body {
            background: #f9f9f9;
        }

        .footer {
            height: 60px;
            margin: 0 auto;
            text-align: center;
            font-size: 14px;
            color: #858585;
        }

        .footer>:first-child {
            margin: 15px 0 10px;
        }

        .footer span {
            margin: 0 10px;
        }
        .form-group{
            margin: 23px auto;
        }
        .col-sm-3{
            margin-left: 242px;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <img src="./imgs/4.jpg.png" class="logo">
        <h2 class="text-center">注册小米账号</h2>
        <form class="form-horizontal">
            <div class="form-group">
                <label for="inputEmail3" class="col-sm-2 control-label">用户名</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control" name='username' placeholder="请输入用户名">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">密码</label>
                <div class="col-sm-7">
                    <input type="password" class="form-control" name='pwd' placeholder="请输入密码">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">确认密码</label>
                <div class="col-sm-7">
                    <input type="password" class="form-control" name='repass' placeholder="请再次输入密码">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">邮箱</label>
                <div class="col-sm-7">
                    <input type="text" class="form-control" name='email' placeholder="请输入邮箱">
                </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-2 control-label">手机号</label>
                <div class="col-sm-7">
                    <input type="number" class="form-control" name='tel' placeholder="请输入手机号">
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-7">
                    <div class="checkbox">
                        <label>
                            <input type="checkbox" name="agree"> 已阅读并同意: 小米 <a href="">用户协议</a> 和<a href=""> 隐私协议</a>
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group">
                <div class="col-sm-offset-2 col-sm-3">
                    <button type="button" class="btn btn-default btn-block">立即注册</button>
                </div>
            </div>
        </form>
    </div>
    <div class="footer">
        <p>简体<span>|</span>繁体<span>|</span>English<span>|</span>常见问题</p>
        <p>小米公司版权所有-京ICP备1004644-京公网安备11010802020134号-京ICP证110507号</p>
    </div>
</body>
<script src="./node_modules/jquery/dist/jquery.min.js"></script>
<script src="./node_modules/layui-layer/dist/layer.js"></script>
<script>
    $(".btn").click(function(){
        //校验数据//先验证用户名是否为空
        if ($("[name='username']").val() === '') {
            alert("用户名不能为空")
            return false
        }
        //校验用户名是否符合规则:3~10位，字母开头，数字字符下划线组成
        var reg1 = /^[a-zA-Z]\w{2,9}$/
        if (!reg1.test($("[name='username']").val())) {
            alert('用户名不符合规范')
            return false
        }
        if ($("[name='pwd']").val() === '') {
            alert('密码不能为空')
            return false
        }
        //校验密码是否符合规则:6~16位，必须包含字母数字
        if (!/\d/.test($("[name='pwd']").val()) || !/[a-zA-Z]/.test($("[name='pwd']").val()) || !/^.{6,16}$/.test($("[name='pwd']").val())) {
            alert('密码需为6~16位的字母和数字组成')
            return false
        }
        if ($("[name='repass']").val() !== $("[name='pwd']").val()) {
            alert('两次输入的密码不一致')
            return false
        }
        if ($("[name='email']").val() === '') {
            alert("邮箱不能为空")
            return false
        }
        var reg2 = /(^[1-9]\d{4,10}@qq\.com$)|(^[a-zA-Z]\w{5,17}@((163|126)\.com$)|yeah\.net$)/
        if (!reg2.test($("[name='email']").val())) {
            alert('请输入正确邮箱')
            return false
        }
        if ($("[name='tel']").val() === '') {
            alert("手机号不能为空")
            return false
        }
        var reg3 = /^1[3-9]\d{9}$/
        if (!reg3.test($("[name='tel']").val())) {
            alert('请输入正确手机号')
            return false
        }
        if (!$("[name='agree']").prop('checked')) {
            alert('请同意此协议')
            return false
        }

        //发送Ajax将数据发送给PHP
        //禁用提交按钮
        $(this).prop('disabled',true)
        //加载弹出层
        var loadindex = layer.load(0, {
            shade: [0.2,'skyblue']
        });
        $.post('./php/register.php',$('form').serialize(),res=>{
            // console.log(res)
            var {meta:{status,msg}} = res
            layer.close(loadindex)
            if(status === 1){
                layer.msg(msg,{
                    icon:1,
                    time:2000
                },function(){
                    location.href = './login.html'
                })
            }else{
                $(this).prop('disabled',false)
                layer.msg(msg,{
                    icon:2,
                    time:2000
                })
            }
        },'json')
    })
        
</script>

</html>